<template>
  <a-row :gutter="16" flex-1 overflow-hidden ref="el">
    <Left :table-collection="tableCollection" :row-h="height" />
    <Right
      :websites="websites"
      :table-collection="tableCollection"
      :row-h="height"
    />
  </a-row>
  <div text-center mt-4>
    <a-space>
      <a-button type="primary" @click="goPrev">上一步</a-button>
      <a-button
        type="primary"
        @click="goNext"
        :disabled="!tableCollection.tableData.length"
        >下一步</a-button
      >
      <a-button
        type="primary"
        :disabled="!tableCollection.tableData.length"
        @click="save"
        >保存</a-button
      >
      <a-button @click="reset">重置</a-button>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { JobStep } from '../Step';
import { StartData } from '../type';
import Left from './Left.vue';
import Right from './Right.tsx';
import type {
  FetchProcess,
  JumpType,
  MatchData,
  OptionData,
  TableRow,
  UpdateProcess,
} from '../type';
import ConditionTable from './conditionTable';
import { event } from './event';
import { useRemove } from '../useRemove';
const props = defineProps<{
  stepData: JobStep;
  fetchProcess: FetchProcess;
  updateProcess: UpdateProcess;
}>();
const emits = defineEmits<{
  jump: [params: JumpType];
}>();

const { stepData, fetchProcess, updateProcess } = toRefs(props);
const { removeCondition } = useRemove(stepData);

const conditionData = ref<MatchData>(cloneDeep(stepData.value.data));
if (!conditionData.value.conditions) {
  conditionData.value.conditions = [];
}

const websites = computed(() => {
  const prevStep = stepData.value.prev!;
  return (prevStep.data as StartData).mapping_categories;
});

const tableCollection = computed(() => new ConditionTable(conditionData.value));
const reset = async () => {
  await fetchProcess.value('CONDITION_RELATION');
  conditionData.value = cloneDeep(stepData.value.data);
  if (!conditionData.value.conditions) {
    conditionData.value.conditions = [];
  }
  // runDiff();
};

const goPrev = () => {
  emits('jump', {
    process_name: 'START',
    callback: () => save(true),
  });
};

const goNext = () => {
  emits('jump', {
    process_name: 'OPTION_RELATION',
    callback: save,
    isNext: true,
  });
  // emits('update', conditionData.value, 'CONDITION_RELATION');
};

const save = async show => {
  stepData.value.updateStep('CONDITION_RELATION', conditionData.value);
  const res = await updateProcess.value();
  if (res.code == 'ok') {
    show && message.success('保存成功');
    stepData.value.isEdit = false;
  } else {
    // message.error(res.message);
  }
};

onMounted(() => {
  event.on('modify', () => {
    stepData.value.isEdit = true;
  });
  event.on('remove', row => {
    stepData.value.isEdit = true;
    removeCondition(row as TableRow);
  });
  event.on('rename', payload => {
    const { new_name, condition_name } = payload as any;
    const optionData = stepData.value.getStep('OPTION_RELATION')
      ?.data as OptionData;
    if (optionData) {
      optionData?.conditions?.forEach(item => {
        if (item.condition_name == condition_name) {
          item.alias_name = new_name;
        }
      });
    }
  });
});
onBeforeUnmount(() => {
  event.all.clear();
});

const el = ref();
const { height } = useElementSize(el);

// window._tb = tableCollection;
defineExpose({
  change: process_name => {
    emits('jump', {
      process_name,
      callback: save,
    });
  },
});
</script>
